<template>
  <div class="contain">
    <!--<div class="header">-->
      <!--<el-button type="primary" @click="addCard()">批量导出</el-button>-->
      <!--<el-button style="display:none" type="primary" @click="addCard()">批量导入</el-button>-->
    <!--</div>-->
    <div style="background-color: #fff;margin-top: 20px;padding: 20px;position: relative;">
      <el-select v-model="type" placeholder="请选择" style="width: 120px;position: absolute;left: 20px;top: 20px;">
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div style="margin-left: 100px;">
        <chart :options="type == '1' ? option : optionTree"></chart>
      </div>
    </div>
    <div class="input_modal">
      <div class="input-item">
        <span>租客：</span>
        <el-input v-model="configList.param.renterName" placeholder="请输入租客" class="proName"  @keyup.enter.native="search"></el-input>
      </div>

      <div class="input-item">
        <el-button type="primary" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="table-content">
      <table-list ref="tableList" :tableConfig='configList' @selectTable="selectTable">
        <el-table-column
          slot="select"  align="center" label="全选"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          slot="sex"  align="center" label="性别" min-width="120px">
          <template slot-scope="scope">
            <div v-if="scope.row.sex == 'male'">男性</div>
            <div v-else-if="scope.row.sex == 'female'">女性</div>
            <div v-else>中性</div>
          </template>
        </el-table-column>
        <el-table-column min-width="120px"  align="center">
        </el-table-column>
        <el-table-column class="btn"  min-width="240px" label="操作" slot="btn" align="center" >
          <template slot-scope="scope">
            <el-button  @click="$router.push('/landlordDetail?id='+scope.row.id)" type="primary" size="small">查看</el-button>
            <el-button  @click="$router.push('/landlordEdit?id='+scope.row.id)" type="primary" size="small">编辑</el-button>
            <el-button  class="search-btn" size="small" type="danger" @click="delLevel(scope.row.id)">删除</el-button>
            <!-- <el-button v-if="scope.row.isRefundBtn == 'y'" class="search-btn" size="small" type="danger" @click="refundBtn(scope.row.id)">退款</el-button> -->
          </template>
        </el-table-column>
      </table-list>
    </div>

  </div>
</template>
<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default{
    data(){
      return {
        option: {
          legend: {},
          tooltip: {},
          series : [
            {
              name: '',
              type: 'pie',
              radius: '55%',
              data:[]
            }
          ]
        },
        optionTree: {
          tooltip: {},
          legend: {
            data:[]
          },
          xAxis: {
            data: []
          },
          yAxis: {},
          series: [{
            name: '',
            type: 'bar',
            data: []
          }]
        },
        typeList: [{
          label: "饼图",
          value: "1"
        },{
          label: "树状图",
          value: "2"
        }],
        type: "1",
        areaList: [{
          label: "全部",
          value: null
        }],
        unitList: [{
          label: "全部",
          value: null
        }],
        buildList: [{
          label: "全部",
          value: null
        }],
        areaId: "",
        unitId: "",
        buildingId: "",
        configList:{
          url:"",
          configList:[
            {
              slot: "select"
            },
            {
              label:'租客',
              prop:'renterName',
            },
            {
              label:'户型',
              prop:'rental.houseRoomType',
            },
            {
              label:'杂费',
              prop:'otherFee',
            },
          ],
          param:{
            nameLike: "",
            sex: "",
            rentalStatus: "",
            buildingNameLike: "",
            gardenNameLike: "",
            unitNameLike: "",
            houseStatus: "",
            renterName: "",
            date: ""
          },
          type:'',
          width:'',
          isPagination:true
        },

        statusList: [{
          label: "全部",
          value: ""
        },{
          label: "已出租",
          value: "rented"
        },{
          label: "未出租",
          value: "unrent"
        }],
        identify: "",
        date: ""
      }
    },
    components: {
      'table-list':() => import('../common/my-table')
    },
    created() {
      this.identify = sessionStorage.getItem("identify");
      if (this.identify == 1) {
        this.configList.url = CONSTANT.URL.STATS.ORDER
      } else {
        this.configList.url = CONSTANT.URL.L_STATS.ORDER
      }
    },
    mounted() {
      let today = new Date().toLocaleDateString().split("/")
      this.date = today[0]+"-"+(today[1].length == 1 ? '0'+today[1] : today[1]); //+"-"+(today[2].length == 1 ? '0'+today[2] : today[2])
      this.configList.param.date = this.date+"-01"
      this.getData()
    },
    methods: {
      getData() {
        let url = this.identify == 1 ? CONSTANT.URL.STATS.OTHERFEE : CONSTANT.URL.L_STATS.OTHERFEE
        common.requestAjax(url, {}, {date: this.date}, (data) => {
          if (data.status == 200) {
            this.option.series.data =[]
            let arrX = [], arrY = []
            for (var i in data.data.bussData) {
              this.option.series[0].data.push({
                value: data.data.bussData[i],
                name: i
              })
              arrX.push(i);
              arrY.push(data.data.bussData[i])
              this.optionTree.xAxis = {
                data: arrX
              }
              this.optionTree.series = {
                name: "",
                type: "bar",
                data: arrY
              }
              this.optionTree.legend = {
                data: arrX
              }
            }
          }
        })
      },
      getList(){
        this.$refs.tableList.getList()
      },
      selectTable() {

      },
      handleChangeArea() {
        if (this.areaList.length) {
          let filter = this.areaList.filter( item => {
            return item.value == this.areaId && item.label != "全部"
          })

          this.configList.param.gardenNameLike = filter.length ? filter[0].label : ""
        }
        this.unitList = [{
          label: "全部",
          value: null
        }]
        this.buildList = [{
          label: "全部",
          value: null
        }]
        this.unitId = ""
        this.buildingId = ""
        if (this.areaId) {
          this.getBuildingList(this.areaId, (data) => {
            data.map( item => {
              this.unitList.push({
                label: item.name,
                value: item.id
              })
            })
          })
        }

      },
      handleChangeUnit() {
        if (this.unitList.length) {
          let filter = this.unitList.filter( item => {
            return item.value == this.unitId && item.label != "全部"
          })
          this.configList.param.unitNameLike = filter.length ? filter[0].label : ""
        }
        this.buildList = [{
          label: "全部",
          value: null
        }]
        this.buildingId = ""
        if (this.unitId) {
          this.getBuildingList(this.unitId, (data) => {
            data.map( item => {
              this.buildList.push({
                label: item.name,
                value: item.id
              })
            })
          })
        }

      },
      handleChangeBuild() {
        if (this.buildList.length) {
          let filter = this.buildList.filter( item => {
            return item.value == this.buildingId && item.label != "全部"
          })

          this.configList.param.buildingNameLike = filter.length ? filter[0].label : ""
        }
      },
      //删除
      deleteItem(id){
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let  url = CONSTANT.URL.INFROMATIONMANAGE.DELETEINFOBYID;
          let data = {id:id} ;
          common.requestAjax(url,data,null,(res)=>{
            if(res.status == 200){
              this.$message({
                type:'success',
                message:'删除成功!'
              });
              this.getinformList();
            }
            else{
              this.$message({
                type:'warning',
                message:res.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //新增编辑
      addCard(id){
        this.$router.push({path:'/informationDetail',query:{'id':id}});
      },
    },
  }
</script>

<style lang="scss">
  .contain {
    .el-dialog__body{ padding-left: 0;padding-top: 30px;border-top:1px solid #dedede;}
    .dialog-con{
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      ul{
        width:28%;list-style: none;padding:0;font-size:14px;float: left;margin-top:0;z-index:999;
        li{ list-style: none;height:60px;line-height:60px;text-align: center;display: block;}
        li.active{color:#21b5cc;background-color: #fff;font-size:16px;border-right:2px solid #21b5cc;}
        //   li:hover{font-size:16px; }
      }
      .tab-content{ width: 70%;display: inline-block;padding-left:10%;background-color: #fff;min-height:300px;
        .sort{
          .sort_name{ font-weight: 600;margin-bottom: 5px;}
          .group-list{ padding-left: 20px;
            .el-radio{display:block;margin-left: 0;margin-bottom: 3px;}
          }
        }
      }
      .el-button--default{background-color: #fff !important;}
    }
  }
</style>
